<template>

	<div class="product-add pb50" v-loading="loading">
		<!--编辑文章-->
		<el-form size="small" :model="form" ref="form" :rules="rules" label-width="100px">
			<div class="common-form">编辑文章</div>
			<el-form-item label="文章标题" prop="article_title"><el-input v-model="form.article_title" placeholder="请输入文章标题"
					class="max-w460"></el-input></el-form-item>
			<el-form-item label="描述" prop="dec"><el-input v-model="form.dec" placeholder="请输入文章描述"
					class="max-w460"></el-input></el-form-item>
			<el-form-item label="文章缩略图">
				<div class="ww100">
					<el-button type="primary" @click="openUpload">上传图片</el-button>
				</div>
				<img class="mt10" v-img-url="form.image.file_path" :width="120" alt="" />
				<div class="gray">建议尺寸 120px*70px</div>
				<!--上传图片组件-->
				<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
			</el-form-item>
			<el-form-item label="文章分类" prop="category_id">
				<el-select v-model="form.category_id" placeholder="请选择" style="width: 460px;">
					<el-option v-for="(item, index) in category" :key="index" :label="item.name"
						:value="item.category_id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="虚拟阅读量"><el-input type="number" v-model="form.virtual_views" placeholder="请输入数字"
					class="max-w460"></el-input></el-form-item>
			<el-form-item label="文章状态">
				<el-radio-group v-model="form.article_status">
					<el-radio :label="1">显示</el-radio>
					<el-radio :label="0">隐藏</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="文章内容">
				<div class="edit_container">
					<Uediter v-if="!loading" :text="form.article_content" :config="ueditor.config" ref="ue"
						@contentChange="contentChangeFunc"></Uediter>
					<!-- <Uediter v-if="!loading" :text="ueditor.text" :config="ueditor.config" ref="ue"></Uediter> -->
				</div>
			</el-form-item>
			<el-form-item label="排序"><el-input type="number" v-model="form.article_sort" placeholder="请输入数字"
					class="max-w460"></el-input></el-form-item>
			<!--提交-->
			<div class="common-button-wrapper">
				<el-button size="small" type="info" @click="cancelFunc" :loading="loading">取消</el-button>
				<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	import ArticleApi from '@/api/article.js';
	import Uediter from '@/components/UE.vue';
	import Upload from '@/components/file/Upload.vue';
	export default {
		components: {
			/*编辑器*/
			Uediter,
			/*图片上传*/
			Upload: Upload
		},
		data() {
			return {
				/*是否加载完成*/
				loading: true,
				/*是否上传图片*/
				isupload: false,
				/*富文本配置*/
				ueditor: {
					text: '',
					config: {
						initialFrameWidth: 400,
						initialFrameHeight: 500
					}
				},
				/*form表单数据*/
				form: {
					article_title: '',
					category_id: '',
					image_id: '',
					image: {},
					article_sort: 1,
					article_status: '0',
					virtual_views: 1,
					article_content: ''
				},
				/*新闻类别*/
				category: [],
				/*验证规则*/
				rules: {
					article_title: [{
						required: true,
						message: '请输入文章标题',
						trigger: 'blur'
					}],
					dec: [{
						required: true,
						message: '请输入文章描述',
						trigger: 'blur'
					}],
					category_id: [{
						required: true,
						message: '请选择文章分类',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {

			this.getDetail();

		},

		methods: {
			contentChangeFunc(e) {
				this.form.article_content = e;
			},

			/*上传*/
			openUpload() {
				this.isupload = true;
			},

			getContent: function() {
				return this.$refs.ue.getUEContent();
			},

			/*获取图片*/
			returnImgsFunc(e) {
				let self = this;
				if (e != null) {
					this.form.image_id = e[0].file_id;
					this.form.image.file_path = e[0].file_path;
				}
				this.isupload = false;
			},

			getDetail() {
				let self = this;
				// 取到路由带过来的参数
				const params = self.$route.query.article_id;
				ArticleApi.toEditArticle({
						article_id: params
					}, true).then(res => {
						self.ueditor.text = res.data.model.article_content;
						self.form = res.data.model;
						if (!self.form.image) {
							self.form.image = {};
						}
						self.category = res.data.catgory;
						self.loading = false;
					})
					.catch(error => {});
			},

			/*修改文章*/
			onSubmit() {
				let self = this;
				let params = this.form;
				// 取到路由带过来的参数
				ArticleApi.editArticle(params, true)
					.then(data => {
						ElMessage({
							message: data.msg,
							type: 'success'
						});
						self.$router.push('/plus/article/index');
					})
					.catch(error => {});
			},

			/*取消添加，返回文章列表*/
			cancelFunc() {
				this.$router.push({
					path: '/plus/article/index'
				});
			}
		}
	};
</script>

<style>
</style>